<template>
  <div>
    <head-text titleText="工作计划"></head-text>
    <div class="list-content">
      <div class="filter-area">
        <Search :searchData="searchData" :searchItem="searchItem"></Search>
        <div>
          <el-button @click="add" plain type="success" size="mini"
            >添加工作计划</el-button
          >
        </div>
      </div>
      <div class="table-title">
        <h5>工作计划</h5>
      </div>
      <custom-table
        :tableData="tableData"
        :tableListData="tableListData"
        :tableBtn="tableBtn"
        :currentData="currentData"
        @handleEdit="handleEdit"
        @handleDelete="handleDelete"
        @onPageChange="onPageChange"
        @onSizeChange="onSizeChange"
      ></custom-table>
    </div>
    <dialog-com :dialogObj="dialogObj" @reflash="getList"></dialog-com>
  </div>
</template>

<script>
import headText from "@c/headText";
import customTable from "@c/table";
import Search from "@c/search";
import dialogCom from "./dialogCom";
import { PLANWORKSTATUS, PLANWORKPRIORITY } from "@u/wordbook";

import {
  getPlanWorkListURLApi,
  getSysuserSelectApi,
  getdeletePlanWorkListURLApi,
} from "@s/api";

export default {
  components: {
    headText,
    customTable,
    Search,
    dialogCom,
  },
  data() {
    return {
      searchItem: [],
      searchData: {
        uid: "",
        name: "",
        planStartTime: "",
        planEndTime: "",
        actualStartTime: "",
        actualEndTime: "",
        status: "",
        priority: "",
      },
      planWorkStatus: PLANWORKSTATUS,
      planWorkPriority: PLANWORKPRIORITY,
      dialogObj: {
        id: "",
        title: "",
        show: false,
        form: {
          title: "",
          type: "",
        },
      },
      pageNo: 1,
      total: 0,
      pageSize: 10,
      currentData: {},
      tableData: [],
      sysuserSelect: [], //代理人
    };
  },
  created() {
    this.searchItem = [
      {
        type: "input",
        label: "案件名：",
        prop: "name",
        placeholder: "请输入",
      },
      {
        type: "daterange",
        label: "计划完成日期：",
        timeFormat: "yyyy-MM-dd",
        timeList: ["planStartTime", "planEndTime"],
      },
      {
        type: "daterange",
        label: "实际完成日期：",
        timeFormat: "yyyy-MM-dd",
        timeList: ["actualStartTime", "actualEndTime"],
      },
      {
        type: "select",
        label: "完成状态",
        prop: "status",
        placeholder: "请选择",
        selectList: this.planWorkStatus,
      },
      {
        type: "select",
        label: "优先级",
        prop: "priority",
        placeholder: "请选择",
        selectList: this.planWorkPriority,
      },
    ];
    //  table表格
    this.tableListData = [
      { width: "50", label: "", type: "index" },
      { prop: "customerName", width: "", label: "客户名称" },
      { prop: "caseName", width: "", label: "案件名称" },
      { prop: "planStartTime", type: "date", width: "", label: "计划开始时间" },
      { prop: "planEndTime", width: "", type: "date", label: "计划结束时间" },
      {
        prop: "actualStartTime",
        width: "",
        type: "date",
        label: "实际开始时间",
      },
      { prop: "actualEndTime", width: "", type: "date", label: "实际结束时间" },
      { prop: "statusName", width: "", label: "完成状态" },
      { prop: "priorityName", width: "", label: "优先级" },
      { prop: "remark", width: "100", label: "备注" },
      { label: "操作", type: "btn", width: "180", fixed: "right" },
    ];
    // 按钮
    this.tableBtn = [
      {
        name: "编辑",
        btnType: "primary",
        handleFn: "handleEdit",
      },
      {
        name: "删除",
        btnType: "danger",
        handleFn: "handleDelete",
      },
    ];
  },
  mounted() {
    this.getList();
    this.getSysuserSelect("代理人");
    let userInfo = JSON.parse(localStorage.getItem("mb_userInfo")) || "{}";
    if (
      userInfo.role.name === "管理员" ||
      userInfo.role.name === "超级管理员"
    ) {
      this.searchItem.unshift({
        type: "select",
        label: "代理人：",
        prop: "uid",
        placeholder: "请选择",
        selectList: this.sysuserSelect,
      });
    }
  },
  methods: {
    //获取列表
    getList() {
      let json = JSON.parse(JSON.stringify(this.searchData));
      json.pageNo = this.pageNo;
      json.pageSize = this.pageSize;
      getPlanWorkListURLApi(json).then((res) => {
        this.tableData = res.list;
        this.currentData.total = res.total;
      });
    },
    onPageChange(val) {
      this.pageNo = val;
      this.getList();
    },
    onSizeChange(val) {
      this.pageNo = 1;
      this.pageSize = val;
      this.getList();
    },
    // 搜索事件
    getDataList(val) {
      this.searchData = val;
      this.pageNo = 1;
      this.pageSize = 10;
      this.$nextTick(() => {
        this.getList();
      });
    },
    getSysuserSelect(val) {
      getSysuserSelectApi({ name: val }).then((res) => {
        if (res) {
          try {
            res.map((item) => {
              this.sysuserSelect.push({
                value: item.userName,
                id: item.userId,
              });
            });
          } catch (err) {
            console.log(err);
          }
        }
      });
    },
    add() {
      this.dialogObj.read = false;
      this.dialogObj.id = "";
      this.dialogObj.show = true;
      this.dialogObj.title = "添加工作计划";
    },
    // 编辑工作计划
    handleEdit(row) {
      this.dialogObj.id = row.id;
      this.dialogObj.show = true;
      this.dialogObj.form = row;
      row.status === "2"
        ? (this.dialogObj.read = true)
        : (this.dialogObj.read = false);
      this.dialogObj.title = "编辑工作计划";
    },
    // 删除工作计划
    handleDelete(row) {
      this.$confirm("此操作将删除该工作计划?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let json = row.id;
        getdeletePlanWorkListURLApi(json).then(() => {
          this.getList();
          this.$message({
            type: "success",
            message: "删除成功！",
          });
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
